$notification-padding: 1rem 1.25rem !default;
$notification-icon-margin: 0 0.625rem 0 0 !default;
$notification-container-background-color: transparent !default;
$notification-shadow: none !default;
$notification-border-radius: var(--rz-border-radius) !default;
$notification-success-color: var(--rz-on-success) !default;
$notification-success-background-color: var(--rz-success) !default;
$notification-success-icon-color: $notification-success-color !default;
$notification-warning-color: var(--rz-on-warning) !default;
$notification-warning-background-color: var(--rz-warning) !default;
$notification-warning-icon-color: $notification-warning-color !default;
$notification-error-color: var(--rz-on-danger) !default;
$notification-error-background-color: var(--rz-danger) !default;
$notification-error-icon-color: $notification-error-color !default;
$notification-info-color: var(--rz-on-info) !default;
$notification-info-background-color: var(--rz-info) !default;
$notification-info-icon-color: $notification-info-color !default;

// Notification CSS variables

:root {
  --rz-notification-padding: #{$notification-padding};
  --rz-notification-icon-margin: #{$notification-icon-margin};
  --rz-notification-container-background-color: #{$notification-container-background-color};
  --rz-notification-shadow: #{$notification-shadow};
  --rz-notification-border-radius: #{$notification-border-radius};
  --rz-notification-success-color: #{$notification-success-color};
  --rz-notification-success-background-color: #{$notification-success-background-color};
  --rz-notification-success-icon-color: #{$notification-success-icon-color};
  --rz-notification-warning-color: #{$notification-warning-color};
  --rz-notification-warning-background-color: #{$notification-warning-background-color};
  --rz-notification-warning-icon-color: #{$notification-warning-icon-color};
  --rz-notification-error-color: #{$notification-error-color};
  --rz-notification-error-background-color: #{$notification-error-background-color};
  --rz-notification-error-icon-color: #{$notification-error-icon-color};
  --rz-notification-info-color: #{$notification-info-color};
  --rz-notification-info-background-color: #{$notification-info-background-color};
  --rz-notification-info-icon-color: #{$notification-info-icon-color};
}

.rz-growl {
  position: fixed;
  top: 100px;
  right: 20px;
  min-width: 20rem;
}

.rz-growl-item-container {
  background-color: var(--rz-notification-container-background-color);
}

.rz-growl-item {
  border-radius: var(--rz-notification-border-radius);
  box-shadow: var(--rz-notification-shadow);
  padding: var(--rz-notification-padding);
}

.rz-growl-message-success {
  .rz-growl-item {
    color: var(--rz-notification-success-color);
    background-color: var(--rz-notification-success-background-color);
  }
}

.rz-growl-message-warn {
  .rz-growl-item {
    color: var(--rz-notification-warning-color);
    background-color: var(--rz-notification-warning-background-color);
  }
}

.rz-growl-message-error {
  .rz-growl-item {
    color: var(--rz-notification-error-color);
    background-color: var(--rz-notification-error-background-color);
  }
}

.rz-growl-message-info {
  .rz-growl-item {
    color: var(--rz-notification-info-color);
    background-color: var(--rz-notification-info-background-color);
  }
}

.rz-growl-item {
  margin: 1rem 0;

  p {
    color: inherit;
  }
}

.rz-growl-icon-close {
  float: right;

  &:before {
    content: "close";
  }
}

.rz-growl-image {
  float: left;
  margin: var(--rz-notification-icon-margin);

  &.rzi-check {
    color: var(--rz-notification-success-icon-color);

    &:before {
      content: "check";
    }
  }

  &.rzi-exclamation-triangle {
    color: var(--rz-notification-warning-icon-color);

    &:before {
      content: "warning";
    }
  }

  &.rzi-info-circle {
    color: var(--rz-notification-info-icon-color);

    &:before {
      content: "info";
    }
  }

  &.rzi-times {
    color: var(--rz-notification-error-icon-color);

    &:before {
      content: "error";
    }
  }
}

.rz-growl-title {
  font-weight: bold;
}

.rz-growl-message {
  p {
    display: inline-block;
    margin-bottom: 0;
  }
}
